<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue循环遍历指令</title>
</head>
<body>
  <table id="t">
      <thead>
        <tr>
            <th>商品名</th>
            <th>价格</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="p in productList">
           <td>{{ p.name }}</td>
           <td>{{ p.price }}</td>
        </tr>
      </tbody>
      <ul>
          <li v-for="value in person">{{ value }}</li>
      </ul>
  </table>
  <script src="vue.global.js"></script>
  <script>
      const vue =Vue.createApp({
          date(){
              return{
                  todos:['ghshja','sajk'],
                  productList:[
                      {
                          name:'小米SU7',
                          price:1566
                      },
                      {
                          name:'华为',
                          price: 65656
                      }
                  ],
                  person:{
                      name:'zhangsan',
                      age:'18'
                  }
              }
          },
      }).mount('#t')
  </script>
</body>
</html>